$(function () {
	var show_num = [];
	draw(show_num);

	$("#canvas").on('click', function () {
		draw(show_num);
	})
	$("#replace").on('click', function () {
		draw(show_num);
	})
	$("#login_btn").on('click', function () {
		var val = $("#login_yzm").val().toLowerCase();
		var num = show_num.join("");
		if (val == '') {
			alert('请输入验证码！');
		} else if (val == num) {
			alert('提交成功！');
			$("#login_yzm").val('');
			draw(show_num);

		} else {
			alert('验证码错误！请重新输入！');
			$("#login_yzm").val('');
			draw(show_num);
		}
	})
})

function draw(show_num) {
	var canvas_width = $('#canvas').width();
	var canvas_height = $('#canvas').height();
	var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
	var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
	canvas.width = canvas_width;
	canvas.height = canvas_height;
	var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
	var aCode = sCode.split(",");
	var aLength = aCode.length;//获取到数组的长度

	for (var i = 0; i <= 3; i++) {
		var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
		var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
		var txt = aCode[j];//得到随机的一个内容
		show_num[i] = txt.toLowerCase();
		var x = 10 + i * 20;//文字在canvas上的x坐标
		var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
		context.font = "bold 23px 微软雅黑";

		context.translate(x, y);
		context.rotate(deg);

		context.fillStyle = randomColor();
		context.fillText(txt, 0, 0);

		context.rotate(-deg);
		context.translate(-x, -y);
	}
	for (var i = 0; i <= 5; i++) { //验证码上显示线条
		context.strokeStyle = randomColor();
		context.beginPath();
		context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
		context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
		context.stroke();
	}
	for (var i = 0; i <= 30; i++) { //验证码上显示小点
		context.strokeStyle = randomColor();
		context.beginPath();
		var x = Math.random() * canvas_width;
		var y = Math.random() * canvas_height;
		context.moveTo(x, y);
		context.lineTo(x + 1, y + 1);
		context.stroke();
	}
}

function randomColor() {//得到随机的颜色值
	var r = Math.floor(Math.random() * 256);
	var g = Math.floor(Math.random() * 256);
	var b = Math.floor(Math.random() * 256);
	return "rgb(" + r + "," + g + "," + b + ")";
}

// -----登录方式切换------
$(function () {
	$(".method li").eq(0).css({ "color": "#ff6600", "font-weight": "bold" });
	$(".method li").click(function () {
		var index = $(this).index();
		$(this).css({ "color": "#ff6600", "font-weight": "bold" });
		$(this).siblings().css({ "color": "#000", "font-weight": "normal" });
		$(".information>ul").eq(index).fadeIn(200);
		$(".information>ul").eq(index).siblings().fadeOut(200);
	});
})
 // -----------denglu -----------
 let oUser = document.querySelector('#username')
 let oPass = document.querySelector('#password')
 let oLogin = document.querySelector('#login_btnmima')
 let reEmail = /^\w+@\w+(.com|.cn|.net|.org|.我爱你)$/
 let rePass = /^\w{6,16}$/
 // 定义开关
 let emFaillag = false
 let passFlag = false
 // 前端验证
 oUser.addEventListener('change', function () {
	 if (!reEmail.test(this.value)) {
		 alert('邮箱格式不正确！')
		 emFaillag = false
	 } else {
		 emFaillag = true
	 }
 })
 oPass.addEventListener('change', function () {
	 if (!rePass.test(this.value)) {
		 alert('密码格式不正确！')
		 passFlag = false

	 } else {
		 passFlag = true
	 }
 })

 // 后台验证
 oLogin.addEventListener('click', function () {
	 
	 if (emFaillag && passFlag) {
		 pAjax({
			 url: '../server/login.php',
			 type: 'post',
			 data: {
				 username: oUser.value,
				 password: oPass.value
			 }
		 }).then(function (res) {
			 let json = JSON.parse(res)

			 if (json.code === 0) {
				 window.location.href = '../index.html'
				 // 存token
				 localStorage.setItem('token', json.token)
			 }

			 alert(json.msg)
		 })

	 }
 }, false)

 $(function(){
	$('#username').focus();
	var btn = $("#checkbox");
	var xianshi= $("#dis");
	btn.click(function(){
		if(xianshi.css("display")=='block'){
			xianshi.hide();
		}else{
			xianshi.show();
		}   
	});
});

function save_username() {
	if($('#checkbox').attr('checked')==true) {
		var username = $('#username').val();
		setcookie('username', username, 3);
	} else {
		delcookie('username');
	}
}

var username = getCookie('username');
if(username != '' && username != null) {
	$('#username').val(username);
	$('#checkbox').attr('checked',true);
}



